<template>
  <div class="container">
    <div class="main">
      <div class="main_content">
        <a-form
          :form="form"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-form-item label="用户名">
            <a-input
              v-decorator="['username']"
              placeholder="请输入用户名"
              disabled
            />
          </a-form-item>
          <a-form-item label="姓名">
            <a-input v-decorator="['name']" placeholder="请输入姓名" />
          </a-form-item>
          <a-form-item label="头像">
            <div class="upLoadImg_class">
              <!-- <img :src="avaUrl" alt="" style="width: 50px; height: 50px" /> -->
              <a-avatar
                :size="30"
                :src="avaUrl"
                style="width: 50px; height: 50px"
              />
            </div>
            <div :key="ImgKey">
              <a-upload
                v-decorator="[
                  'avatarUrl',
                  {
                    initialValue: '',
                  },
                ]"
                name="file"
                :multiple="true"
                :headers="pic_token"
                action="http://1.117.91.88:52016/fraud-prevention/api/admin/image"
                @change="handleChange"
                placeholder="请上传头像"
              >
                <a-button> <a-icon type="upload" /> 更换头像信息</a-button>
                <a-button v-if="state_update">
                  <a-icon type="upload" /> 添加头像信息</a-button
                >
              </a-upload>
            </div>
          </a-form-item>
          <a-form-item label="性别">
            <a-select
              v-decorator="[
                'sex',
                {
                  rules: [{ required: true, message: '请输入性别' }],
                },
              ]"
              placeholder="请选择性别"
            >
              <a-select-option value="0"> 男 </a-select-option>
              <a-select-option value="1"> 女 </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="电话">
            <a-input
              v-decorator="[
                'tel',
                {
                  rules: [
                    { required: true, message: '请输入电话' },
                    {
                      min: 6,
                      max: 11,
                      message: '长度需在6-11位之间',
                      trigger: 'blur',
                    },
                  ],
                },
              ]"
              placeholder="请输入电话"
            />
          </a-form-item>
          <a-form-item label="邮箱">
            <a-input v-decorator="['email']" placeholder="请输入邮箱" />
          </a-form-item>
          <a-form-item label="角色">
            <a-input v-decorator="['roles']" placeholder="角色" disabled />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 12, offset: 10 }">
            <a-button type="primary" html-type="submit" @click="finish()">
              完成
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      role_list: [],
      avaUrl: "",
      state_update: false,
      pic_token: {},
      ImgKey: "",
    };
  },
  created() {
    this.getUserMessage();
    this.pic_token.authorization = window.localStorage.getItem("authorization");
  },
  methods: {
    handleChange(info) {
      let fileList = [...info.fileList];
      fileList = fileList.slice(-2);
      fileList = fileList.map((file) => {
        if (file.response) {
          file.url = file.response.url;
          this.avaUrl = file.response.data || "";
        }
        return file;
      });
    },
    async getUserMessage() {
      // 接收从 router 跳转 传来的参数
      let that = this;
      let Id = that.$route.params.id;
      const { data: res } = await this.$http.get(`/admin/currentuser`);
      // 获取权限信息
      const { data: res2 } = await this.$http.get("/admin/role/all");
      if (res.code == 200) {
        this.role_list = res2.data;
      }
      this.avaUrl = res.data.avatarUrl;
      this.form.setFieldsValue({
        username: `${res.data.username}`,
        name: `${res.data.name}`,
        sex: `${res.data.sex}`,
        tel: `${res.data.tel}`,
        email: `${res.data.email}`,
        roles: `${res.data.roles}`,
      });
    },
    async finish() {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          const { data: res } = await this.$http.put("/admin/user", {
            id: this.$route.params.id,
            name: values.name,
            avatarUrl: this.avaUrl,
            sex: values.sex,
            tel: values.tel,
            email: values.email,
          });
          if (res.code == 200) {
            this.common.notify("success", "信息完善成功");
            // this.$message.success("信息完善成功");
            this.$emit("showCurrentAvatar");
            this.$router.push({
              path: "/Home",
            });
          }
        }
      });
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.ImgKey = "";
      } else {
        this.ImgKey = Math.random();
      }
    },
  },
};
</script>
<style  lang='less' scoped>
.container {
  box-sizing: border-box;
  display: flex;
  background-color: #eef1f2;
  overflow: hidden;
  padding: 15px;
  .main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    overflow: hidden;
    background-color: #eef1f2;
    // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    .main_content {
      padding: 20px;
      padding-top: 80px;
      padding-left: 180px;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 10px;
    }
  }
}
// 按钮样式
.ant-btn,
.ant-btn:active,
.ant-btn:focus {
  margin-top: 20px;
}
</style>